<template>
  <uni-nav-bar title="移库单据调整" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>数量</view>
      <input class="uni-input" placeholder="请填写数量" v-model="amount" type="number"/>
    </view>
    <view class="space-between top">
      <view>补液员</view>
      <hpy-form-select :dataList="fluidList" text="name" name="value" @change="consolu" :Text="fluidName"
        :icon="true" />
    </view>
    <view class="space-between top">
      <view>受液机</view>
      <hpy-form-select :dataList="receiverList" text="name" name="value" @change="consoluReceiver" :Text="receiverName"
        :icon="true" />
    </view>
    <view class="space-between top">
      <view>补液机</view>
      <hpy-form-select :dataList="fillList" text="name" name="value" @change="consoluFill" :Text="fillName"
        :icon="true" />
    </view>
  </view>
  <view class="package">
    <view style="margin-bottom: 10rpx;">备注</view>
    <textarea class="textarea" v-model="value" placeholder="请简单描述..." :auto-height='true'></textarea>
  </view>
  <view class="add" @click="BulletBox()">确认</view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { toPublish } from '@mqtt';
  import { getStaffAll, getFillList } from '@/gql/administrator';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { ref } from 'vue';
  const value = ref('')
  const amount = ref()
  const fluidList = ref([]); // 补液员列表
  const fluidName = ref('请选择补液员'); //补液员名称
  const fluidId = ref();//补液员ID
  const receiverList = ref([]); // 受液机列表
  const receiverName = ref('请选择受液机'); //受液机名称
  const receiverId = ref();//受液机ID
  const fillList = ref([]); // 补液列表
  const fillName = ref('请选择补液机'); //补液名称
  const fillId = ref();//补液ID
  /**
    * 获取补液员列表
    */
  init()
  function init() {
    showLoading()
    const payload = {
      query: getStaffAll,
      variables: {
        keywords: ''
      },
    };
    toPublish(
      'ql/control/getStaffAll',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getStaffAll } = obj.data;
        fluidList.value = getStaffAll;
      }
    );
  }
  //加注机列表
  FillAll()
  function FillAll() {
    showLoading('正在加载');
    const payload = {
      query: getFillList
    };
    toPublish('ql/control/getFillList', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      receiverList.value = data.getFillList;
      fillList.value = data.getFillList;
    });
  }
  //切换补液员列表
  function consolu(e : any) {
    fluidName.value = e.data.name;
    fluidId.value = e.data.id;
  }
  //切换受液机列表
  function consoluReceiver(e : any) {
    receiverName.value = e.data.name;
    receiverId.value = e.data.id;
  }
  // 切换补液机列表
  function consoluFill(e : any) {
    fillName.value = e.data.name;
    fillId.value = e.data.id;
  }
  // 提交补液单据调整
  function BulletBox() {
    if (!amount.value) {
      errorToast('请填写加注量')
      return
    }
    if (!fluidId.value || !fillId.value || !receiverId.value) {
      errorToast('请选择完整的移库信息')
      return
    }
    showLoading()
    const payload = {
      user_id: Number(fluidId.value),
      from_fill_id: Number(fillId.value),
      to_fill_id: Number(receiverId.value),
      amount: amount.value,
      remarks: value.value,
    };
    toPublish(
      'control/addDeliveryMoveKu',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 60rpx auto 20rpx;
    font-size: 32rpx;
  }

  .top {
    margin-top: 25rpx;
  }

  input {
    text-align: right;
  }
</style>
<style>
  .top>>>.select-picker {
    justify-content: flex-end;
  }
</style>